import React, { useEffect, useState } from 'react'
import _ from 'lodash'
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux'
//ui
import { Descriptions, Input, Button, Modal, Typography, Space, Collapse } from 'antd';
import styles from './style.module.scss'
import './style.module.scss'
//comp/
import WordSource from '../../WordSource';
//state
import { WordSourceState } from '../../WordSource/reducer';
import { MainInfoState } from '../../MainInfo/reducer';
//action
import * as Action from '../reducer'
import * as WordSourceAction from '../../WordSource/reducer';
//util
import ConvertUtils, { StringObject } from '../../../utils/Convert';

const { Text } = Typography;
const { TextArea } = Input;

interface WordSentenceIndexState {
    wordSourceState: WordSourceState;
    mainInfoState: MainInfoState;
    add: typeof Action.add;
    setCurrentIdInner: typeof WordSourceAction.setCurrentIdInner,
}

export const _WordSentenceIndexAdd: React.SFC<WordSentenceIndexState> = props => {
    const { wordSourceState, mainInfoState, add, setCurrentIdInner } = props

    // const chi2 = '战斗机就不行啦！如果是双座战斗机还好，单座战斗机在飞行时，飞行员至少80%—90%的精力要保持飞行状态，剩余的精力才能用来进行作战协同。双机编队作战已经接近飞行员精力的极限了。作为长机，飞行时不是不用管僚机，而是每个动作都要考虑僚机的状态，做复杂动作前更是要摇晃机翼提醒僚机，僚机更要有大量精力用于跟队，看到长机外侧盘旋赶紧加油门压杆上升高度跟队，'
    // const eng2 = 'm trying to test my Spring MVC webapp with Spring test. It uses springmvc-router for routing and that appears to break the tests, which work fine when I use @RequestMapping instead of my routes.conf file.'

    const chi = ''
    const eng = ''
    const [engValue, setEngValue] = useState(eng);
    const [chiValue, setChiValue] = useState(chi);
    const [sourceId, setSourceId] = useState(0);
    const [sourceIdBackup, setSourceIdBackup] = useState(-1);
    const [sourcePath, setSourcePath] = useState('');
    const [modalVisible, setModalVisible] = useState(false);

    useEffect(() => {
        if (sourceId) {
            const str: StringObject = { value: '' };
            ConvertUtils.getPathToSun(wordSourceState.dto, str, "t" + sourceId.toString());
            setSourcePath(str.value.substring(0, str.value.length - 2))
        }
    }, [sourceId, wordSourceState.dto])

    //bug is here
    useEffect(() => {
        setSourceId(_.parseInt(wordSourceState.dto.key.toString().substr(1)))
    }, [wordSourceState.dto.key])

    useEffect(() => {
        //currentIdInner初始化的时候不改变
        //sourceinner -> myinner
        if (modalVisible && wordSourceState.currentIdInner) {
            setSourceId(wordSourceState.currentIdInner)
        }
    }, [modalVisible, wordSourceState.currentIdInner])

    useEffect(() => {
        if (modalVisible) {
            setSourceIdBackup(sourceId)
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [modalVisible])

    return (
        <div className='descriptionsItem'>
            {
                (_.isNull(mainInfoState.word)) ? (<div>请选择单词</div>) : (
                    <Collapse defaultActiveKey={['1']} >
                        <Collapse.Panel header="新增" key="1">
                            <Descriptions bordered size='small' className={styles.descs}>
                                <Descriptions.Item label="英文" span={3} className={styles.desc}>
                                    <TextArea rows={2} onChange={(e) => setEngValue(e.target.value)} value={engValue} />


                                </Descriptions.Item>
                                <Descriptions.Item label="中文" span={3} className={styles.desc}>
                                    <TextArea rows={2} onChange={(e) => setChiValue(e.target.value)} value={chiValue} />

                                </Descriptions.Item>
                                <Descriptions.Item label="来源" span={3} className={styles.desc}>
                                    <Space>
                                        <Button onClick={() => setModalVisible(true)}>修改来源</Button>
                                        <Text>{sourcePath}</Text>
                                    </Space>
                                </Descriptions.Item>
                                <Descriptions.Item label="操作" span={3} className={styles.desc}>
                                    <Button onClick={() => {
                                        add({
                                            chineseValue: chiValue,
                                            englishValue: engValue,
                                            wordSentenceId: -1,
                                            wordSourceId: sourceId
                                        })
                                    }}>添加例句</Button>
                                </Descriptions.Item>
                            </Descriptions>
                        </Collapse.Panel>
                    </Collapse>
                )
            }

            <Modal
                title={<div>选择来源</div>}
                visible={modalVisible}
                onOk={() => {
                    setModalVisible(false)
                    //关闭currentIdInner
                    setCurrentIdInner(null)
                }}
                onCancel={() => {
                    setModalVisible(false)
                    //关闭currentIdInner
                    setCurrentIdInner(null)
                    setSourceId(sourceIdBackup)
                }}
                okText="选择"
                cancelText="取消"
            >
                <WordSource outerSettedId={sourceId}
                />
                <Text>{sourcePath}</Text>
            </Modal>
        </div >
    )
}



const mapStateToProps = (state: RootState) => ({
    wordSourceState: state.WordSourceState,
    mainInfoState: state.MainInfoState,
})

const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
    add: Action.add,
    setCurrentIdInner: WordSourceAction.setCurrentIdInner,
}, dispatch);

/**
 * 得到当前过滤器并渲染 Link。
 */
const WordSentenceIndexAdd = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordSentenceIndexAdd)

export default WordSentenceIndexAdd